<template>
	<view class="avatar-popup">
		<u-popup
			v-model="qrcodePopupShow"
			mode="center"
      :closeable="false"
      close-icon-color="#888"
			border-radius="16"
			@close="close">
			<view class="popup-content1">
				<canvas-drawer :painting="painting" class="canvasdrawer" width="300" height="480" @getImage="eventGetImage"></canvas-drawer>
			</view>
		</u-popup>
	</view>
</template>

<script>
  import CanvasDrawer from '@/components/canvasDrawer/canvas-drawer.vue';
  import { mapGetters } from 'vuex';
	export default{
    components: {
      CanvasDrawer
    },
		props: {
			'qrcodePopupShow': {
				default: false,
			},
			'tipContent': {
				type: String,
				default: '看广告自动下载超清无水印原图'
			},
			'btnText': {
				type: String,
				default: '看广告下载'
			}
		},
		data(){
			return{
				show: this.popupShow,
				downloadCount: 0,
        painting: {
					width: 300,
					height: 480,
					clear: true,
					views: [
            {
							type: 'image',
							url: 'https://qiniu-res.jintianwang.cc/miniprogram-author-9e5ab97b-158a-41b9-b2d9-21afcfcc8fe7.png',
							top: 83,
							left: 78,
							width: 180,
							height: 180,
						},
            {
							type: 'image',
							url: 'https://qiniu-res.jintianwang.cc/20221028132847-author_bg.png',
							top: 0,
							left: 0,
							width: 300,
							height: 480
						},
            {
							type: 'image',
							url: 'https://qiniu-res.jintianwang.cc/star_logo.png',
							top: 10,
							left: 15,
							width: 20,
							height: 20,
              borderRadius: 10
						},
            {
							type: 'text',
							content: '星光取图',
							fontSize: 12,
							color: '#ffffff',
							textAlign: 'left',
							top: 16,
							left: 40,
							bolder: false
						},
            {
							type: 'image',
							url: 'https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIQ6ICCwVrD5H50ulvHFwicias0B8NRyORLDSaXicc7u7DQNcyZibHSVIUPYY8wEtIwoqhssP2mPpw4aw/132',
							top: 124,
							left: 119,
							width: 64,
							height: 64,
							borderRadius: 32
						},
            {
							type: 'text',
							content: '惠聚',
							fontSize: 22,
							color: '#ffffff',
							textAlign: 'left',
              width: 300,
							height: 40,
							top: 294,
							left: 78,
							bolder: false
						},
            {
							type: 'text',
							content: '推广口令：678925',
							fontSize: 15,
							color: '#ffffff',
							textAlign: 'left',
              width: 300,
							height: 40,
							top: 336,
							left: 78,
							bolder: false
						},
					]
				},
			}
		},
    computed: {
			...mapGetters([
				'appletInfo'
			])
		},
		watch: {
			popupShow: {
				immediate: true,
				handler(val, oldValue) {
					this.show = val;
					if (val) {
						this.getCheckingDownloadStatus();
					}
				}
			}
		},
		methods: {
			close(){
				this.$emit('close', false);
			},

      eventGetImage(e){
				uni.hideToast();
				console.log(e);
			}
		}
	}
</script>
<style lang="scss" scoped>
	.popup-content1{
		color: #fff;
    position: relative;
    text-align: center;

    .button-content{
      padding: 0 24rpx;
      margin-bottom: 24rpx;
    }

    .btn{
      ::before{
        display: none;
      }
      ::after{
        display: none;
      }
    }

		.tips{
			font-size: 32rpx;
			margin-bottom: 48rpx;
		}
	}
</style>
